<template>
  <div>
    <Bread />
    <div class="detail-container">
      <div class="flex flex-direction info_box">
        <div class="text-bold title">{{ detailInfo.title }}</div>
        <div class="flex justify-between desc" style="width: 100%">
          <div class="mr-4 w-min-8rem">来源：{{ detailInfo.source }}</div>
          <div class="flex-grow">发布日期：{{ detailInfo.publishTime }}</div>
        </div>
        <div class="flex status-box">
          <div
            class="text-bold flex justify-center align-center status"
            :style="[statusColor(detailInfo.status)]"
          >
            <span>{{ statusText(detailInfo.status) }}</span>
          </div>
          <div class="flex-sub flex justify-between time-box">
            <div class="flex-sub flex">
              <div>受理时间：{{ detailInfo.acceptanceTime }}</div>
              <div style="margin-left: 2.5rem;">
                截止时间：{{ detailInfo.closeTime }}
              </div>
            </div>
            <div style="margin-top: -0.5rem;" v-if="detailInfo.status == 1">
              申报进行中，距离申报截止
              <span
                style="font-size: 20px; font-weight: bold; color: #f92b00;"
                >{{
                  calcCloseTime(detailInfo.acceptanceTime, detailInfo.closeTime)
                }}</span
              >
              天
            </div>
          </div>
        </div>
      </div>

      <!-- <el-row style="margin-top: 2rem;">

        <el-col :span="24" class="flex flex-direction detail_box">
          <div class="detail_content" v-html="detailInfo.policyDetails"></div>

          <div
            v-if="detailInfo.fileList && detailInfo.fileList.length"
            class="flex annex-box"
          >
            <div>附件：</div>
            <div class="flex flex-direction annex">
              <div
                v-for="(item, index) in detailInfo.fileList"
                :key="'annex' + index"
                class="self-start flex align-center annex-list"
                @click="downloadFile(item.pathName)"
              >
                <div style="margin-left: 0.5rem;">{{ item.fileName }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row> -->

      <div class="main-content">
        <div class="content">
          <!-- <div class="content-head">
            个人简介
          </div> -->
          <div v-html="detailInfo.policyDetails" class="content"></div>
        </div>
        <div class="aside">
          <h5 class="head">
            相关推荐
            <div class="head-line"></div>
          </h5>
          <ul class="px-4 list-inside">
            <li
              v-for="item in recommendList"
              :key="item.id"
              class="recommend-item flex items-center"
              @click="toDetail(item)"
            >
              <!-- <i class="el-icon-caret-right bg-blue-500"> </i> -->
              <!-- <div>
              <el-image
                :src="item.mainImg"
                class="recommend-left"
                fit="cover"
              ></el-image>
            </div> -->
              <p class="font-bold text-md">
                {{ item.name || item.title }}
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bread from '@/components/Bread'
// import Recommendations from '@/components/Recommendations';
import { getPolicyManagement, getPolicyReList } from '@/api/policy.js'

export default {
  name: 'policyDetail',
  components: {
    Bread,
    // Recommendations
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.request()
    })
  },
  data() {
    return {
      detailInfo: {
        managementId: 0,
        title: '',
        source: '',
        status: '',
        publishTime: '',
        acceptanceTime: '',
        closeTime: '',
        policyDetails: ``,
        fileList: [],
      },
      recommendList: [],
      // 状态列表
      statusList: [
        { id: 0, statusText: '未开始' },
        { id: 1, statusText: '进行中' },
        { id: 2, statusText: '已结束' },
      ],
    }
  },
  computed: {
    // 状态文字
    statusText() {
      return (statusId) => {
        if (!statusId) {
          return '未开始'
        }

        let resArr = this.statusList.filter((item) => {
          return item.id === parseInt(statusId)
        })
        return resArr[0]['statusText']
      }
    },
    // 状态配色
    statusColor() {
      return (statusId) => {
        let res = ''
        switch (statusId) {
          case 0:
            res = { backgroundColor: '#999', color: '#fff' }
            break
          case 1:
            res = { backgroundColor: '#f08519', color: '#fff' }
            break
          case 2:
            res = { backgroundColor: '#999', color: '#fff' }
            break
          default:
            res = { backgroundColor: '#999', color: '#fff' }
            break
        }
        return res
      }
    },
    // 计算剩余天数
    calcCloseTime() {
      return (acceptanceTime, closeTime) => {
        let beginDate = new Date(acceptanceTime).getTime()
        let endDate = new Date(closeTime).getTime()
        let days = (endDate - beginDate) / (1 * 24 * 60 * 60 * 1000)
        return Math.ceil(days)
      }
    },
  },
  watch: {
    $route(v) {
      this.request(v.params.id)
      this.getRecommendList()
    },
  },
  created() {
    this.request()
    this.getRecommendList()
  },
  mounted() {
    // 获取详情数据
    // this.request()
  },
  methods: {
    toDetail(item) {
      let mId = item.managementId
      let sourceId = this.detailInfo.managementId
      if (mId === sourceId) {
        return
      }
      this.$router.push({ path: '/policy/policyDetail/' + mId })
    },
    // 数据请求
    request(id) {
      if (!id && id !== 0) {
        id = this.$route.params.id
      }
      this.detailInfo.managementId = id
      getPolicyManagement(id).then((res) => {
        if (res.code === 200) {
          this.detailInfo = res.data
        }
      })
    },

    // 文件下载
    downloadFile(url = ``) {
      try {
        const elemIF = document.createElement(`iframe`)
        elemIF.src = url
        elemIF.style.display = `none`
        document.body.appendChild(elemIF)
      } catch (e) {
        console.log(e)
      }
    },
    getRecommendList() {
      getPolicyReList().then((res) => {
        if (res.code === 200) {
          this.recommendList = res.rows.slice(0, 5)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.info_box {
  margin-top: 7px;

  .title {
    font-size: 24px;
  }

  .desc {
    width: 21%;
    margin-top: 1.5rem;
    font-size: 14px;
    color: #999;
  }

  .status-box {
    margin-top: 2rem;
    width: 100%;
    height: 6.5rem;
    background-color: #f2f2f2;

    .status {
      width: 3rem;
      height: 100%;

      span {
        margin-top: 0.5rem;
        font-size: 16px;
        letter-spacing: 0.5rem;
        writing-mode: vertical-lr;
      }
    }

    .time-box {
      padding: 2.5rem 2rem;
      font-size: 15px;
    }
  }
}
.aside {
  min-width: 390px;
  width: 390px;
  max-height: 500px;
  @apply border  border-gray-300;
  li:before {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    border: 10px solid #1678ff;
    margin-right: 10px;
    border-color: transparent transparent transparent #1678ff;
  }
  .line-1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  .recommend-item {
    @apply py-4 border-b cursor-pointer;

    .recommend-left {
      width: 104px;
      min-width: 104px;
      height: 68px;
    }
  }
}
.detail_box {
  margin-top: 1rem;
  margin-bottom: 7.5rem;
  padding: 1.625rem 0;

  .detail_content {
    padding: 1rem 0;
    width: 100%;
    min-height: 20vh;

    ::v-deep img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }
  }

  .annex-box {
    margin-top: 1rem;

    .annex-list {
      width: 100%;
      cursor: pointer;
      color: #1678ff;

      &:hover {
        color: #2356ff;
      }
    }
  }
}
</style>
